import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

// 创建出patch函数
const patch = init([
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
]);

const container = document.getElementById("container");
const btn = document.getElementById("btn");
// 创建虚拟节点
const myVnode1 = h("div", { class: { box: true } }, [
  h("p", { key: 'A'}, "A"),
  h("p", { key: 'B'}, "B"),
  h("p", { key: 'C'}, "C"),
]);

// 1. diff 算法的 key 属性尤为重要，是节点唯一标识，相当于告诉 diff 算法 更改前后是同一个节点
const myVnode2 = h("div", { class: { box: true } }, [
  h("p", { key: 'D'}, "D"),
  h("p", { key: 'A'}, "A"),
  h("p", { key: 'B'}, "B"),
  h("p", { key: 'C'}, "C"),
]);

// 2. 只有在同一个虚拟节点下，才能做精细化比较。否则会暴力拆除。
// 如何定义是在同一个虚拟节点下？: 插入新的。需要选择器相同且 key 相同
const myVnode3 = h("p", { class: { box: true } }, [
  h("p", { key: 'D'}, "D"),
  h("p", { key: 'A'}, "A"),
  h("p", { key: 'B'}, "B"),
  h("p", { key: 'C'}, "C"),
]);

// 3. 只能同层比较，不可以跨层比较。即使在同一虚拟节点下，跨层了，diff 也不会做精细化比较
const myVnode4 = h("div", { class: { box: true } }, h('span', {}, [
  h("p", { key: 'A'}, "A"),
  h("p", { key: 'B'}, "B"),
  h("p", { key: 'C'}, "C"),
]));

// 让虚拟节点上树
patch(container, myVnode1);

btn.onclick = function () {
  patch(myVnode1, myVnode4);
};
